<template>
  <div style="padding: 16px">
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
import { BasicTable, useTable, TableAction, ActionItem, EditRecordRow } from '/@/components/Table';
import { getSessionPageApi, delSessionApi } from '/@/api/monitor/session';
import { columns, Permission } from './index-option';
import { useMessage } from '/@/hooks/web/useMessage';

const { createMessage } = useMessage();

const [registerTable, { reload }] = useTable({
  title: '会话列表',
  api: getSessionPageApi,
  columns,
  formConfig: {
    labelWidth: 80,
  },
  striped: false,
  useSearchForm: false,
  bordered: true,
  canResize: true,
  ellipsis: true,
  actionColumn: {
    width: 100,
    title: '操作',
    dataIndex: 'action',
    fixed: undefined,
  },
});

function handleDelete(record: Recordable) {
  delSessionApi(record.token).then((res) => {
    createMessage.success(res.msg);
    handleSuccess();
  });
}

function handleSuccess() {
  reload();
}

function createActions(record: EditRecordRow): ActionItem[] {
  return [
    {
      icon: 'ant-design:delete-outlined',
      label: '踢下线',
      auth: Permission.DEL,
      color: 'error',
      popConfirm: {
        title: '是否删除账号【' + record.loginName + '】的会话信息？',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
</script>
